<!-- <template>
  <div :style="{ color }">
    <h1>Dynamic Style</h1>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const color = ref("red");
</script> -->
<template>
  <div
    class="global-color"
    :style="[
      fontSize && { 'font-size': fontSize },
      lineHeight && { 'line-height': lineHeight },
    ]"
  >
    <h1>Dynamic Style</h1>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const fontSize = ref("18px");
const lineHeight = ref("1.5");
</script>
